<template>
  <viwe class="indexContent">
    <view class="header">
      <view class="left">
        <view @click="toLastPage">
          <u-icon name="close"></u-icon>
        </view>
      </view>
      <view class="title">
        <u-field v-model="title" placeholder="标题">
        </u-field>
      </view>
      <view class="right">
        <view class="btn" @click="saveArticle">
          发表
        </view>
      </view>
    </view>

    <view class="text-box">

      <u-field label-width="0" type="textarea" v-model="content" placeholder="分享新鲜事儿" :border-bottom="false">
      </u-field>
    </view>
    <view class="img-box">
      <view>
        <uni-section title="只选择图片" type="line">
          <view class="example-body">
            <uni-file-picker limit="9" title="最多选择9张图片" :imageStyles="imageStyles" ref="filePicker"
              @select="select"></uni-file-picker>
          </view>
        </uni-section>
      </view>

    </view>
    <view>

    </view>
  </viwe>
</template>

<script>
  export default {
    name: "qrcode",
    data() {
      return {
        systemNavHeight: 0,
        fileList: [],
        content: '',
        title: '',
        imageStyles: {
          width: 85,
          height: 85,
        },
        imageCode: '',
      }
    },
    methods: {
      async addNew() {
        try {
          const response = await uni.$http.post(
            '/photo/share/add', {
              'content': this.content,
              'imageCode': this.imageCode,
              'pUserId': uni.getStorageSync('userid'),
              'title': this.title
            });
          console.log("上传成功", response.data);
        } catch (error) {
          console.error('请求失败:', error);
          uni.showToast({
            title: '请求失败，请稍后重试',
            icon: 'none'
          });
        }
      },
      toLastPage() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      },
      saveArticle() {
        console.log(this.fileList);
        this.uploadFiles()

      },
      async uploadFiles() {
        try {
          let promises = this.fileList.map((filePath, index) => {
            return new Promise((resolve, reject) => {
              uni.uploadFile({
                url: 'https://api-store.openguet.cn/api/member/photo/image/upload', // 上传接口地址
                name: 'fileList', // 服务器定义的文件 key，这里传递文件数组，可以在后端解析成多个文件
                filePath: filePath, // 图片路径
                header: {
                  'appId': '4bdcd3628313424691d9e0d30960172f',
                  'appSecret': '51377638dd97ce96e4bb2a3b6f6d2bc6e9812',
                },
                success(response) {
                  resolve(response.data);
                },
                fail(error) {
                  reject(error);
                }
              });
            });
          });

          const results = await Promise.all(promises);

          console.log('所有文件上传成功', JSON.parse(results[0]).data);
          this.imageCode = JSON.parse(results[0]).data.imageCode
          this.addNew()
        } catch (error) {
          console.error('上传异常:', error);
          uni.showToast({
            title: '上传异常，请稍后重试',
            icon: 'none'
          });
        }
      },
      select(e) {
        console.log('选择文件：', e)
        this.fileList = this.fileList.concat(e.tempFilePaths)
      },
    }
  }
</script>
<style>
  page {
    background-color: #FFFFFF;
  }
</style>
<style scoped lang="scss">
  .header {
    display: flex;
    padding: 20rpx;

    .left {
      flex: 1;

      view {
        padding: 10rpx;
      }
    }

    .right {
      .btn {
        height: 50rpx;
        padding: 0 25rpx;
        border-radius: 25rpx;
        font-size: 25rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right, #2FC1DF, #057ED6);
        color: #FFFFFF;
      }
    }
  }

  .img-box {
    padding: 20rpx;
  }

  .title {
    text-align: left;
  }
</style>